<%--
  Created by IntelliJ IDEA.
  User: 王韫琛
  Date: 2021/1/11
  Time: 2:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/webjars/layui/2.5.6/css/layui.css">
</head>
<body>
<br/>
<%--搜索表单开始--%>
<form class="layui-form layui-form-pane" method="post">
    &nbsp;&nbsp;输入身份证搜索：
    <div class="layui-inline">
        <input class="layui-input" name="identity_card" lay-verify="required|identity">
    </div>
    <button class="layui-btn" lay-submit lay-filter="doSearch">搜索</button>
</form>
<%--搜索表单结束--%>

<table id="demo" lay-filter="test">
</table>
<script type="text/javascript" src="${pageContext.request.contextPath}/webjars/layui/2.5.6/layui.js"></script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //渲染表格组件
        table.render({
            elem: '#demo'//绑定表格元素，推荐使用ID选择器
            ,height: 468
            ,url: '/findPage' //异步请求的地址,加入分页后，默认使用page(当前页码)和limit(每页显示数量)作为参数名称
            ,page: true //开启分页
            ,cols: [[ //表头
                //field属性：字段属性，该属性与实体类的属性名一致
                //title属性：表头文本
                //sort标识是否排序
                {field: 'id', title: 'ID', sort: true, fixed: 'left',align:"center"}
                ,{field: 'name', title: '姓名',align:"center"}
                ,{field: 'gender', title: '性别',align:"center"}
                ,{field: 'age', title: '年龄',align:"center"}
                ,{field: 'phone', title: '手机号',align:"center"}
                ,{field: 'identity_card', title: '身份证',align:"center" }
                ,{field: 'census', title: '籍贯',align:"center" }
                ,{field: 'nat', title: '核酸证明',align:"center" }
                ,{field: 'bus_type', title: '交通工具',align:"center" }
                ,{field: 'ticket', title: '班次',align:"center" }
                ,{field: 'interchange', title: '中转站',align:"center" }
                ,{field: 'addtime', title: '添加时间', sort: true,align:"center"}
                ,{field: 'remark', title: '备注',align:"center" }
            ]]
            ,request: {
                pageName: 'pageNum' // 页码的参数名称，默认：page
                , limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
        });

        //监听搜索按钮得提交开始
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                url: '/selectIdentitycard',
                where: data.field,//查询条件
                page: {
                    curr: 1
                }
            })
            //禁止页面刷新
            return false;
        })
        //监听搜索按钮结束
    });
</script>
</body>
</html>
